* {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}


.banner {
  width: 600px;
  height: 480px;
  margin: 200px auto;
  position: relative;

  .pic {
    li {
      //position: absolute;
      //left: 0;
      //right: 0;
      display: none;

      img {
        width: 600px;
        height: 480px;
      }

      &.current {
        display: block;
      }
    }
  }

  .left_btn, .right_btn {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    top: 50%;
    margin-top: -15px;
    cursor: pointer;
  }

  .left_btn {
    left: 10px;
  }

  .right_btn {
    right: 10px;
  }

  .left_btn:hover, .right_btn:hover {
    background: rgba(255, 255, 255, 0.6);
  }

  .sub {
    position: absolute;
    bottom: 20px;
    left: 50px;

    li {
      width: 20px;
      height: 20px;
      background: #ccc;
      color: white;
      line-height: 20px;
      text-align: center;
      float: left;
      margin-right: 10px;
      cursor: pointer;

      &.current {
        background: black;
      }
    }
  }
}

